<template>
    <!-- 主播扬帆号分享页 -->
    <div id="anchor_container">
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <banner>
            <img class="banner-component-img" slot="banner-image" v-if="channelInfo.logo"
                 :src="channelInfo.logo + '?x-oss-process=image/resize,w_414'"/>
            <img class="banner-component-img" slot="banner-image" v-else-if="!channelInfo.logo"
                 src="../../assets/images/channel_default_big.png" />
            <div class="banner-component-backcloth" slot="banner-back"></div>
            <div class="banner-component-anchor-info" slot="banner-inst">
                <div class="banner-component-anchor-face">
                    <img :src="channelInfo.hostUserIcon + '?x-oss-process=image/resize,w_70'"/>
                </div>
                <div class="banner-component-anchor-name">{{channelInfo.name}}</div>
                <div class="banner-component-anchor-num">{{this.simpleNum(channelInfo.viewCount)}}来过&nbsp;&nbsp;&nbsp;&nbsp;{{channelInfo.subscriptionCount}}订阅</div>
            </div>
            <div class="banner-component-anchor-btn" slot="banner-btn">
                <btn text="打开扬帆 发现更精彩的TA" cate="btn-dark" type="btn-half" :wakeup-param="callApp"></btn>
            </div>
        </banner>
        <div id="wrapper">
            <live v-if="programList.totalCount" :info="programList.rows" :type="'2'"></live>
            <div class="greyChannel" v-if="programList.totalCount"></div>
            <div class="share-carousel-component-container">
                <div class="swiper-container" id="channel_swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="groups in menus.groups">
                            <div v-for="list in groups.rows" class="menu_block"  @click="openApp()">
                                <div class="menu_img">
                                    <img :src="list.icon+'?cmd=imageprocess/format/jpg/processtype/2/width/80/quality/100    '"/>
                                </div>
                                <div class="menu_name">{{list.name}}</div>
                            </div>
                            <div style="margin:0;padding:0;width: 0;height:0;clear: both;"></div>
                        </div>
                    </div>
                    <!--<div :class='{"swiper-pagination": paginationshow}' :style='{"text-align": paginationdesition}'></div>-->
                </div>
                <div class="swiper-pagination2" style="width: 100%;top: 36px;"></div>
            </div>
            <div class="greyChannel"></div>
            <list :contents="contentList"></list>
            <div class="page-container" @click="getContents()">{{loadMore}}</div>
        </div>
    </div>
</template>

<script>
    import qs from "querystring"
    import Wakeup from "../../assets/libs/func/callapp.js"

    export default {
        components: {
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve);
            },
            Banner: function (resolve) {
                require(["../../components/banner.vue"], resolve);
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve);
            },
            Live: function (resolve) {
                require(["../../components/live.vue"], resolve);
            },
            List: function (resolve) {
                require(["../../components/list.vue"], resolve);
            },
            Wakeup
        },
        data: function () {
            return {
                channelInfo: {},
                programList: {},
                contentList: {
                    rows: [],
                    style: 0,
                    totalCount: 0
                },
                layerDisplay: {
                    type: Boolean,
                    default: true
                },

                page: 1,
                pageSize: 5,
                loadMore: "加载中，请稍候...",
                canLoadMore: true,

                callApp: {
                    contentType: 6,
                    contentParam: this.$route.params.channelid
                },
                menus:{
                    groups:[{
                        rows:[]
                    }
                    ]
                },
            }
        },
        beforeCreate: function () {

            let that = this;
//            console.log(interbaseUrl + "setsail/external/externalService?service=getChannelDetail");
//            console.log(process.env.VUE_APP_SERVER_VER);
            // 频道信息
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            channelId: this.$route.params.channelid
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {

                // 404重定向
                if (response.data.state === 2012) {
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                for(let i=0;i<response.data.data.menus.length;i++){
                    let data= response.data.data.menus[i];
                    let rows={
                        icon:data.icon,
                        name:data.menuName,
                    }
                    if(i%8==0){
                        that.menus.groups[parseInt(i/8)]={
                            rows:[]
                        };
                    }
                    that.menus.groups[parseInt(i/8)].rows.push(rows);

                }

                setTimeout(function () {
                    new Swiper("#channel_swiper", {
                        // direction: That.direction,
                        // loop: "loop",
                        pagination: ".swiper-pagination2",
                        paginationType: "bullets",
                        //  autoplay: 3000,
                        effect: "slide",
                        autoplayDisableOnInteraction: false,
                        preventClicks: false
                    });
                }, 100)
                that.channelInfo = response.data.data;
//                if (that.channelInfo.logo == "")
//                    that.channelInfo.logo = "/assets/images/channel_default_big.png";
             //   console.log("—————————————————————————————");
             //   console.log(JSON.stringify(this.channelInfo, undefined, 2));
              //  console.log("—————————————————————————————");

                // 修改页面信息
                let meta = {
                    title: this.channelInfo.name + "的主页",
                    content: this.channelInfo.shareContent,
                    name: this.channelInfo.name
                };

                // console.log(meta);
                this.createMetaInfo(meta);
                this.freshTitles(this.channelInfo.name + "的主页");


                // 触发AccessChannel行为
                function doAccessChannel() {
                    let actionType = "accesschannel";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "opertime": that.toFullTime(),
                        "imei": "",
                        "openid": "",
                        "ip": "",
                        "channelid": that.$route.params.channelid,
                        "contentid": that.$route.params.channelid,
                        "contentname":that.channelInfo.name,
                        "contenttype": "channel",
                        "sharetype": "",
                        "extendtag": "",
                        "type": "channel_3",
                    }
                    shareUrlReport(behaviorData, actionType);
                }
                doAccessChannel();
                window.initShareConfig = initShareConf(
                        that.channelInfo.shareTitle,
                        that.channelInfo.shareContent,
                        that.channelInfo.shareImg,
                        window.location.href,
                        {
                            uid: "",
                            username: "",
                            opertime: that.toFullTime(),
                            imei: "",
                            openid: "",
                            ip: "",
                            channelid: that.$route.params.channelid,
                            contentid: "",
                            name: that.channelInfo.name,
                            contenttype: "programme",
                            type: "programme_2",
                            tagid: "",
                            extendtag: "",
                            sharetype: "weixin",
                            shareurl: window.location.href
                        }
                );
            });

            // 直播列表
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getProgramList",
                    qs.stringify({
                        params: JSON.stringify({
                            channelId: this.$route.params.channelid,
                            idx: 0,
                            size: 5,
                            status: 2
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
                this.programList = response.data.data;
                // console.log("+++++++++++++++++++++");
                // console.log(JSON.stringify(this.programList, undefined, 2));
                // console.log("+++++++++++++++++++++");
            });

        },
        mounted: function () {
            let that = this;
            that.getContents();
            window.addEventListener('scroll', this.addmore)

        },
        methods: {
            addmore: function () {
                //滚动条在Y轴上的滚动距离
                function getScrollTop() {
                    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
                    if (document.body) {
                        bodyScrollTop = document.body.scrollTop;
                    }
                    if (document.documentElement) {
                        documentScrollTop = document.documentElement.scrollTop;
                    }
                    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
                    return scrollTop;
                }

                //文档的总高度
                function getScrollHeight() {
                    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
                    if (document.body) {
                        bodyScrollHeight = document.body.scrollHeight;
                    }
                    if (document.documentElement) {
                        documentScrollHeight = document.documentElement.scrollHeight;
                    }
                    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
                    return scrollHeight;
                }

                //浏览器视口的高度
                function getWindowHeight() {
                    var windowHeight = 0;
                    if (document.compatMode == "CSS1Compat") {
                        windowHeight = document.documentElement.clientHeight;
                    } else {
                        windowHeight = document.body.clientHeight;
                    }
                    return windowHeight;
                }

                if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
                    this.getContents();
                }
            },
            getState: function (bol) {
                this.layerDisplay = bol;
            },
            getContents: function () {
                // 获取内容列表
                this.loadMore = "加载中，请稍候...";
                this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getChannelContentList",
                        qs.stringify({
                            params: JSON.stringify({
                                channelId: this.$route.params.channelid,
                                idx: (this.page - 1) * this.pageSize,
                                size: this.pageSize
                            }), apiVersion: process.env.VUE_APP_SERVER_VER
                        })
                ).then((response) => {
                    let responseData = response.data.data;
                    this.contentList.style = responseData.style;
                    this.contentList.totalCount = responseData.totalCount;

                    if (this.canLoadMore)
                        this.contentList.rows = this.contentList.rows.concat(responseData.rows);
                    this.page++;
                    if ((this.page - 1) * this.pageSize >= responseData.totalCount) {
                        this.loadMore = "已经加载全部";
                        this.canLoadMore = false;
                    } else {
                        this.loadMore = "加载中，请稍候...";
                    }
                    // console.log("+++++++++++++++++++");
                    // console.log(JSON.stringify(this.contentList, undefined, 2));
                    // console.log("+++++++++++++++++++");
                });
            },
            openApp: function () {
                // console.log(JSON.stringify(this.wakeupParam, undefined, 2));
                openDownPage(this.callApp.contentType, this.callApp.contentParam);
            }
        }
    }
</script>

<style>
    #anchor_container {
    }

    .banner-component-container {
        padding-bottom: 65.6% !important;
    }

    .banner-component-anchor-info {
        top: 12% !important;
    }
    #channel_swiper{height:auto;}
    .menu_block{
        width: 25%;
        padding:0;
        margin:0;
        float:left;
        margin-bottom:0.6rem;
    }
    .menu_img{width: 60%;margin:0 auto;margin-bottom: 0.5rem;position: relative;padding-bottom: 60%;}
    .menu_block img {display: block;position: absolute;left:0;top:0;width: 100%;height: 100%;object-fit: cover;}
    .menu_name{height:1.3rem;font-size: 0.8rem;line-height: 1.3rem;text-align: center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .swiper-pagination2{text-align: center;}
    .swiper-pagination2 .swiper-pagination-bullet-active{width: auto;}
    .swiper-pagination2 .swiper-pagination-bullet{width:5px;height: 5px;background: #ccc;}
    .swiper-pagination2 .swiper-pagination-bullet-active {opacity: 1;background-color: #9852FF !important;}
</style>